/* -----------ui前端框架-------------
 * 
* 公用css v1.0.0
* Created & Modified by lijia
* Date modified 2017.07.19
*/
/*------------------------------------
结构目录：
  1. 基础CSS
    1.1 清除浮动
  1. 基础CSS
    1.1 排版
      1.1.1  清除浮动
      1.1.2  常用高度、宽度
      1.1.3  标题
      1.1.4  对齐
      1.1.5  定位
      1.1.6  浮动
	  1.1.7  文字单行溢出省略号
	  1.1.8  线条
      1.1.9  外边距
      1.1.10  内填充
      1.1.11 边框，css3圆角
      1.1.12 css3阴影
      1.1.13 行内分割竖线
      1.1.14 文字尺寸
      1.1.15 文字行距
      1.1.16 文字颜色
	  1.1.17  隐藏 显示
    1.2 图片
      1.2.1 图集效果
	  1.2.2 头像
  2. 组件
    2.1 动画效果
    2.2 导航
	  2.2.1 顶部导航
	  2.2.2 向导
    2.3 折叠
    2.4 空心按钮
    2.5 单行平分列
    2.6 弹出侧边栏
----------------------------------
CSS写作注意事项：
  1. 页面编码规范
    1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。
    1.2. 全局字体设置：
         windows 7系统：微软雅黑 Arial；
         windows XP及以下：新宋体，宋体，Arial
         MAC默认字体：Helvetica Neue和Helvetica Hiragino Sans GB。
    1.3. 中文字体使用编码转换，请参阅下节“中文字体css编码转换”
    1.4. 推荐使用216web安全色
  2. 属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间应减少空格，去掉最后一个“;”，例如：.class{width:200px;height:100px}
  3. 属性的书写顺序：
    3.1. 按照元素模型由外及内，由整体到细节书写，大致分为五组：
      位置：position,left,right,float
      盒模型属性：display,margin,padding,width,height
      边框与背景：border,background
      段落与文本：line-height,text-indent,font,color,text-decoration,...
      其他属性：overflow,cursor,visibility,...
    3.2. 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;
  4. 带有前缀的属性，单独一行，通过缩进，让每个属性的值垂直对齐，方便编辑维护。
  5. 谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
  6. 选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix
  7. 避免使用各种 CSS Hack，如需对 IE 进行特殊定义，请参阅下节“关于 CSS Hack 的说明”
  8. 勿使用冗余低效的 CSS 写法，例如：ul li a span{... }
  9. 慎用 !important
  10. 建议使用具有语义化的classname或id，请参阅下节“css 命名规范及对应的缩写”
  11.避免使用兼容性不好的使用滤镜
  12.开发过程中的未定事项，须用 [!] 标出，以便于后续讨论整理。
  13.注释格式，统一使用双斜杠加*。
  14.上下模块之间的间距统一使用下一个模块的margin-top来实现，好处是：如果没有下一个模块也不会多出一段空隙。
  15.hover，selected，disabled，current等具有特定意义的请勿直接占用。
  16.:link :visited :hover :active书写顺序 L-V-H-A，速记：LoVe（喜欢）HAte（讨厌）。
  17.不要使用 @import
----------------------------------
关于 CSS Hack 的说明：
  1. _          IE6
  2. *          IE6/7
  3. !important IE7/Firefox
  4. *+         IE7
  5. \9         IE6/7/8
  6. \0         IE8
  7. 条件hack
      <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本
      <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7
      <!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8
      <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上
----------------------------------

/*1.0 基础样式*/
/*1.1 排版*/
/*1.1.1 清除浮动
	Name:			style_clearfix
	Example:		class="clearfix|cl"
	Explain:		clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after,.clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}
.cl-both{clear: both}

/*1.1.1 常用宽度、高度
	Name:			style_Layout
*/

.w-100p{width:100%}
.w-1200{width:1200px}
.w-1000{width:1000px}
.w-980{width:980px}
.w-950{width:950px}
.w-900{width:900px}
.w-930{width:930px}
.w-600{width:600px}
.w-400{width:400px}
.w-300{width:300px}
.w-250{width:250px}
.w-200{width:200px}
.w-210{width:210px}
.w-220{width:220px}
.w-230{width:230px}
.w-150{width:150px}
.w-160{width:160px}
.w-180{width:180px}
.w-190{width:190px}
.w-140{width:140px}
.w-120{width:120px}
.w-110{width:110px}
.w-100{width:100px}
.w-60{width:60px}
.w-50{width:50px}
.w-90{width:90px}
.w-80{width:80px}
.w-70{width:70px}
.h-15{height:15px;}
.h-90{height:90px;}
.h-80{height:80px;}
.h-140{height:140px;}
.h-30{height:30px}
.h-35{height:35px}
.h-40{height:40px}
.h-50{height:50px}
.h-60{height:60px}
.h-100{height:100px}
.h-200{height:200px}
.h-250{height:250px}
.h-300{height:300px}
.h-400{height:400px}
.h-500{height:500px}
.h-520{height:520px}

/*1.1.3  标题
	Example：
	<h1>h1. 大标题<small>小标题</small></h1>
    <h2>h2. 大标题<small>小标题</small></h2>
    <h3>h3. 大标题<small>小标题</small></h3>
    <h4>h4. 大标题<small>小标题</small></h4>
    <h5>h5. 大标题<small>小标题</small></h5>
    <h6>h6. 大标题<small>小标题</small></h6>
*/
h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;color:inherit}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{font-weight:400;line-height:1;color:#999}
h1,h2,h3{padding-top:20px;padding-bottom:10px}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small{font-size:65%}
h4,h5,h6{margin-top:10px;margin-bottom:10px}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small{font-size:75%}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:18px}
h5{font-size:14px}
h6{font-size:12px}

/*1.1.4  对齐
	Name:			style_text-align
	Example:		class="text-l|text-r|text-c|va-t|va-m|va-b"
	Explain:		.text-水平对齐 （.text-l左对齐|.text-r右对齐|.text-c居中对齐）
					.va-上下对齐 （.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐）
*/
.text-l{text-align:left}.text-r{text-align:right}.text-c{text-align:center}
.va *{vertical-align:sub!important;*vertical-align:middle!important;_vertical-align:middle!important}
.va-t{vertical-align:top!important}.va-m{vertical-align:middle!important}.va-b{vertical-align:bottom!important}
.letter-spacing{letter-spacing: -1px}

/*1.1.5  定位
	Name:			style_position
	Example:		class="pos-r|pos-a|pos-f"
	Explain:		.pos-r 相对定位|.pos-a 绝对定位|.pos-f 固定
*/
.pos-r{position:relative}.pos-a{position:absolute}.pos-f{position:fixed}

/*1.1.6  浮动
	Name:			style_float
	Example:		class="l|r"
	Explain:		.l 左浮动|.r 右浮动
*/
.l,.f-l{float:left!important;_display:inline}
.r,.f-r{float:right!important;_display:inline}

[class*="span"].r,
[class*="span"].f-r{float:right}

/*控制元素对定位的位置：居左|居右|j居上|居下*/
.pos-left{left:0; right:auto}
.pos-right{right:0; left:auto}
.pos-top{top:0; bottom:auto}
.pos-bottom{top:auto; bottom:0}

/*1.1.7  文字单行溢出省略号
	Name:			style_text-overflow
	Example:		class="text-overflow"
*/
.text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-i {text-indent: 2rem;}

/*1.1.8  线条
	Name:			style_line
	Example:		class="line"
*/
.line{font-size:0; line-height:0; border-top: solid 1px #eee; float: none}
.line-l{font-size:0; line-height:0; border-left: solid 1px #eee; float: none}
.line-r{font-size:0; line-height:0; border-right: solid 1px #eee; float: none}
.line-b{font-size:0; line-height:0; border-bottom: solid 1px #e5e5e5; float: none}
.border-0{border:0px !important;}

/*1.1.9  外边距
	Name:			style_margin
	Example:		class="mt-5|mt-10..."
	Explain:		.mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距
*/
.mt-u-5{margin-top:-5px}.mt-u-25{margin-top:-25px}.mt-u-45{margin-top:-45px}.mt-u-50{margin-top:-50px}
.ml-u-35{margin-left:-35px}
.mt-1{margin-top:1px}.mt-4{margin-top:4px}.mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-35{margin-top:35px}.mt-40{margin-top:40px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}.mt-70{margin-top:70px}.mt-100{margin-top:100px}
.mb-5{margin-bottom:5px}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}.mb-40{margin-bottom:40px}.mb-50{margin-bottom:50px}.mb-60{margin-bottom:60px}
.ml-1{margin-left:1px}.ml-5{margin-left:5px}.ml-8{margin-left:8px}.ml-10{margin-left:10px}.ml-15{margin-left:15px}.ml-20{margin-left:20px}.ml-25{margin-left:25px}.ml-30{margin-left:30px}.ml-40{margin-left:40px}.ml-50{margin-left:50px}.ml-60{margin-left:60px}.ml-70{margin-left:70px}.ml-80{margin-left:80px}.ml-100{margin-left:100px}.ml-110{margin-left:110px}.ml-120{margin-left:120px}.ml-145{margin-left:145px}
.mr-3{margin-right:3px}.mr-5{margin-right:5px}.mr-10{margin-right:10px}.mr-15{margin-right:15px}.mr-20{margin-right:20px}.mr-30{margin-right:30px}.mr-35{margin-right:35px}.mr-40{margin-right:40px}.mr-50{margin-right:50px}
.mg-a {margin-right:auto; margin-left:auto}.md-0{margin:0 !important;}
/*1.1.10  内填充
	Name:			style_padding
	Example:		class="pt-5|pt-10|……"
	Explain:		.pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充|.pd表示全局填充
*/
.pt-5{padding-top:5px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-25{padding-top:25px}.pt-30{padding-top:30px}.pt-35{padding-top:35px}.pt-40{padding-top:40px}.pt-45{padding-top:45px}.pt-50{padding-top:50px}.pt-60{padding-top:60px}.pt-70{padding-top:70px}.pt-80{padding-top:80px}.pt-90{padding-top:90px}.pt-200{padding-top:200px}.pt-250{padding-top:250px}.pt-300{padding-top:300px}
.pb-5{padding-bottom:5px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-25{padding-bottom:25px}.pb-30{padding-bottom:30px}.pb-40{padding-bottom:40px}.pb-50{padding-bottom:50px}.pb-60{padding-bottom:60px}.pb-70{padding-bottom:70px}
.pl-0{padding-left:0}.pl-5{padding-left:5px}.pl-10{padding-left:10px}.pl-15{padding-left:15px}.pl-20{padding-left:20px}.pl-25{padding-left:25px}.pl-30{padding-left:30px}.pl-40{padding-left:40px}.pl-50{padding-left:50px !important;}.pl-60{padding-left:60px}.pl-100{padding-left:100px}
.pr-5{padding-right:5px}.pr-10{padding-right:10px}.pr-15{padding-right:15px}.pr-20{padding-right:20px}.pr-25{padding-right:25px}.pr-30{padding-right:30px}.pr-40{padding-right:40px}.pr-50{padding-right:50px}.pr-60{padding-right:60px}.pr-65{padding-right:65px}.pr-100{padding-right:100px}
.pd-0{padding:0px}.pd-5{padding:5px}.pd-10{padding:10px}.pd-15{padding:15px}.pd-20{padding:20px}.pd-25{padding:25px}.pd-30{padding:30px}.pd-40{padding:40px}.pd-50{padding:50px}.pd-60{padding:60px}.pd-70{padding:70px}
/*1.1.11 边框，css3圆角
	Name:			style-border
	Example:		class="bk_gray radius"
	Explain:		.bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
*/
.bl-gray{border-left:1px solid #ddd}
.bl-333{border-left:1px solid #333}
.br-gray{border-right:1px solid #ddd}
.bb-gray{border-bottom:1px solid #ddd}
.bb-eee{border-bottom:1px solid #eee}
.bt-eee{border-top:1px solid #eee}
.br-eee{border-right:1px solid #eee}
.bb-58 {border-bottom:1px solid #585858}
.bb-white {border-bottom:1px solid white}
.bb-blue{border-bottom:1px solid #3bb4f2}
.br-gray-dot{border-right:1px dashed #ccc}
.bb-gray-dot{border-bottom:1px dashed #ccc}
.br-333{border-right:1px solid #333}
.bk-gray{border:solid 1px #ddd}
.bk-999{border:solid 1px #999}
.bk-bbb{border:solid 1px #bbb}
.bk-bf{border:solid 1px #bfbfbf}
.bk-eee{border:solid 1px #eee !important;}
.bk-e5{border:solid 1px #e5e5e5}
.radius{border-radius:4px !important}
.radius-mini{border-radius:3px !important}
.radius-l{border-radius:7px !important}
.radius-xl{border-radius:10px !important}
.radius-xxl{border-radius:15px !important}
.radius-xxxl{border-radius:20px !important}
.round{border-radius:50%; overflow:hidden}
.bk-null{border:0px !important; background:transparent;padding: 0 !important; color:#333;}
.bk-null:active{box-shadow: none;}
.bk-null:focus{outline:0 !important;}

/*1.1.12 css3阴影，遮罩条
	Name:			style_shadow
	Example:		class="box_shadow|text-shadow"
	Explain:		box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
					text-shadow 文字阴影
*/
.box-shadow{-webkit-box-shadow:0 3px 4px rgba(0,0,0,0.1);box-shadow:0 3px 4px rgba(0,0,0,0.1)}
.box-shadow-lg{-webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.1);box-shadow:2px 2px 10px rgba(0,0,0,0.1)}
.box-shadow-xlg{-webkit-box-shadow:4px 4px 20px rgba(0,0,0,0.4);box-shadow:4px 4px 20px rgba(0,0,0,0.4)}
.text-shadow{-webkit-text-shadow:0 1px 2px rgba(0,0,0,0.2);text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.text-shadow-lg{-webkit-text-shadow:0 0 10px rgba(0,0,0,0.2);text-shadow:0 0 10px rgba(0,0,0,0.2)}
.maskBar{background-color:rgba(0,0,0,0.6); color:#fff!important; padding:10px 15px}

/*1.1.13 行内分割竖线
	Name:			style_pipe
	Example:		<span class="pipe">|</span>
*/
.pipe{margin:0 10px;color:#CCC;font-size:10px!important}

/*1.1.14 文字尺寸
	Name:			style_font-size
	Example:		class="f-8|f-10|f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
	Explain:		8px字体|10px字体|12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体|40px字体|60px字体
*/
.f-8{font-size:8px}.f-10{font-size:10px}.f-12{font-size:12px}.f-14{font-size:14px}.f-16{font-size:16px}.f-18{font-size:18px}.f-20{font-size:20px}.f-22 { font-size: 22px }.f-24{font-size:24px}.f-26{font-size:26px}.f-28{font-size:28px}
.f-30{font-size:30px}.f-34{font-size:34px}.f-36{font-size:36px}.f-40{font-size:40px}.f-48{font-size:48px}.f-56{font-size:56px}.f-60{font-size:60px}
.fw-b {font-weight:bold}.fw-n {font-weight:normal}.fw-l{font-weight:lighter}

/*1.1.15 文字行距
	Name:			mod_line-height
	Example:		class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
	Explain:		16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高
*/
.lh-1{line-height:1}.lh-16{line-height:16px}.lh-18{line-height:18px}.lh-20{line-height:20px}.lh-22{line-height:22px}.lh-24{line-height:24px}.lh-26{line-height:26px}.lh-28{line-height:28px}.lh-30{line-height:30px}.lh-32{line-height:32px}.lh-35{line-height:35px}.lh-36{line-height:36px}.lh-50{line-height:50px}



/*1.1.16 文字颜色
	Name:			style_color
	Example:		class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange"
	Explain:		主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色
*/


/*主要颜色*/
.c-primary,.c-primary a,a.c-primary{color:#5a98de}
.c-primary a:hover,a.c-primary:hover{ color:#5a98de}

/*次主色*/
.c-secondary,.c-secondary a,a.c-secondary{color:#555}
.c-secondary a:hover,a.c-secondary:hover{ color:#555}

/*强调色—成功*/
.c-success,.c-success a,a.c-success{color:#5eb95e}
.c-success a:hover,a.c-success:hover{ color:#5eb95e}

/*强调色—危险*/
.c-danger,.c-danger a,a.c-danger{color:#dd514c}
.c-danger a:hover,a.c-danger:hover{ color:#dd514c}

/*强调色—警告*/
.c-warning,.c-warning a,a.c-warning{color:#f37b1d}
.c-warning a:hover,a.c-warning:hover{ color:#f37b1d}

/*强调色—错误*/
.c-error,.c-error a,a.c-error{color:#c00}
.c-error a:hover,a.c-error:hover{ color:#c00}

/*辅助色—浅黑*/
.c-333,.c-333 a,a.c-333{color:#333}
.c-333 a:hover,a.c-333:hover{ color:#333}
.c-31,.c-31 a,a.c-31{color:#313131}
/*辅助色—灰色*/
.c-555,.c-555 a,a.c-555{color:#555}
.c-555 a:hover,a.c-555:hover{ color:#555}
.c-666,.c-666 a,a.c-666{color:#666}
.c-e5e5e5,.c-e5e5e5 a,a.c-e5e5e5{color:#e5e5e5}
.c-666 a:hover,a.c-666:hover{ color:#666}
.c-999,.c-999 a,a.c-999{color:#999}
.c-999 a:hover,a.c-999:hover{color:#999}
.c-ccc,.c-ccc a,a.c-ccc{color:#ccc}
.c-ccc a:hover,a.c-ccc:hover{color:#ccc}
.c-bbb,.c-bbb a,a.c-bbb{color:#bbb}
.c-bbb a:hover,a.c-bbb:hover{color:#bbb}

/*标准色—红色*/
.c-red,.c-red a,a.c-red{color:red}
.c-red a:hover,a.c-red:hover{ color:red}

.c-red2,.c-red2 a,a.c-red2{color:#ff0000;}

.c-c51,.c-c51 a,a.c-c51{color:#c5181f}
.c-c51 a:hover,a.c-c51:hover{ color:#c5181f}

.c-c90,.c-c90 a,a.c-c90{color:#c90909}

/*标准色—绿色*/
.c-green,.c-green a,a.c-green{color:green}
.c-green2,.c-green2 a,a.c-green2{color:#31c27c}

.c-red a:hover,a.c-red:hover{color:green}
/*标准色—蓝色*/
.c-blue,.c-blue a,a.c-blue{color:blue}
.c-blue a:hover,a.c-blue:hover{color:blue}

.c-0b,.c-0b a,a.c-0b{color:#0B7BD1}
.c-0b a:hover,a.c-0b:hover{color:#0B7BD1}
/*标准色—白色*/
.c-white,.c-white a,a.c-white{color:white}
.c-white a:hover,a.c-white:hover{color:white}
/*标准色—黑色*/
.c-black,.c-black a{color:black}
.c-black a:hover,a.c-black:hover{color:black}
/*标准色—橙色*/
.c-orange,.c-orange a,a.c-orange{color:orange}
.c-orange a:hover,a.c-orange:hover{color:orange}
.c-orange2,.c-orange2 a,a.c-orange2{color:#ff723a}


.c-f08,.c-f08 a,a.c-f08{color:#f08938}
.c-f08 a:hover,a.c-f08:hover{color:#f08938}


/*1.1.17  隐藏 显示
  Name:				style_display
  Example:    <div class="hide">隐藏的内容</div> <div class="show">显示的内容</div>
  Explain:    		.hide 隐藏 / .show 显示
*/
.hide{display:none}[hidden]{display: none}
.hidden{display:none!important;visibility:hidden!important}
.f-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
[class*="span"].hide,.row-fluid [class*="span"].hide{display:none}
.show{display:block}
.invisible{visibility:hidden}

/*1.1.18 背景颜色
  Name:				style_background
*/
.bg-fa {background-color:#FAFAFA;}
.bg-eee{background-color:#eee;}
.bg-e5{background-color:#e5e5e5;}
.bg-green{background-color:#31c27c !important;}
.bg-e8 {background-color: #e8e8e8;}
.bg-4c {background-color: #4c4c4c;}
.bg-black {background-color: #000;}
.bg-fff {background-color:#fff}
.bg-white {background-color:#fff}
.bg-gi-green{
    background: -moz-linear-gradient(left, #76e0ad 0%, #32c57e 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#76e0ad), color-stop(100%,#32c57e));
    background: -webkit-linear-gradient(left, #76e0ad 0%,#32c57e 100%);
    background: -o-linear-gradient(left, #76e0ad 0%,#32c57e 100%);
    background: -ms-linear-gradient(left, #76e0ad 0%,#32c57e 100%);
    background: linear-gradient(to right, #76e0ad 0%,#32c57e 100%);
}

.bg-gi-yellow{
     background: -moz-linear-gradient(left, #FFA200  0%, #FFEC8C  100%);
     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#FFA200), color-stop(100%,#FFEC8C));
     background: -webkit-linear-gradient(left, #FFA200 0%,#FFEC8C 100%);
     background: -o-linear-gradient(left, #FFA200 0%,#FFEC8C 100%);
     background: -ms-linear-gradient(left, #FFA200 0%,#FFEC8C 100%);
     background: linear-gradient(to right, #FFA200 0%,#FFEC8C 100%);
}

.bg-gi-blue{
    background: -moz-linear-gradient(left, #2323D4  0%, #37EBE9  100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2323D4), color-stop(100%,#37EBE9));
    background: -webkit-linear-gradient(left, #2323D4 0%,#37EBE9 100%);
    background: -o-linear-gradient(left, #2323D4 0%,#37EBE9 100%);
    background: -ms-linear-gradient(left, #2323D4 0%,#37EBE9 100%);
    background: linear-gradient(to right, #2323D4 0%,#37EBE9 100%);
}


/*1.2 图片*/
/*1.2.1 图集效果
	Name:			modal_album
	Example:
<div class="album-item" style="width:160px">
	<div class="album-img">
		<img src="" style="height: 160px;">
	</div>
	<div class="album-title">《仙剑奇侠传》赵灵儿<span class="c-999">(20张)</span></div>
	<div class="album-bg">
		<div class="album-bg-Fir"></div>
		<div class="album-bg-Sec"></div>
	</div>
</div>*/
.album-item{}
	.album-img{ border:1px solid #e0e0e0}
	.album-img img{ display:block; width: 100%}
	.album-title{display:block;text-align:left;padding:7px 5px;line-height:18px;color:#555;text-decoration:none;font-size:12px;border:solid 1px #e0e0e0;border-top:0}
	.album-bg-Fir,.album-bg-Sec{border:1px solid #e6e6e6;border-top:1px solid #f5f5f5;height:1px;margin:0 auto;overflow:hidden}
	.album-bg-Fir{ margin:0 3px}
	.album-bg-Sec{ margin:0 6px}

/*1.2.2 头像
	Name:			mod_avatar
	Example:		<i class="avatar avatar-L radius"><img src="static/h-ui/images/ucenter/avatar-default.jpg"></i>
*/
.avatar{display:inline-block;position:relative; overflow:hidden}
.avatar img{ display:block}
.avatar.radius,.avatar.radius img{border-radius:50%}
.avatar,.avatar img{width:32px; height:32px}
.avatar.size-MINI{ width:16px;height:16px}
.avatar.size-S,.avatar.size-S img{width:24px; height:24px}
.avatar.size-M,.avatar.size-M img{width:32px; height:32px}/*默认为中，可以不写，可以理解为：均码*/
.avatar.size-L,.avatar.size-L img{width:48px; height:48px}
.avatar.size-XL,.avatar.size-XL img{width:64px; height:64px}
.avatar.size-XXL,.avatar.size-XXL img{width:100px; height:100px}
.avatar.size-XXXL,.avatar.size-XXXL img{width:128px; height:128px}
.iconpic{display:inline-block; vertical-align:sub;*vertical-align:middle;_vertical-align:middle; width:16px; height:16px; background-position:center; background-repeat:no-repeat}



/*2. 组件*/
/*2.1 动画效果
	Name:			style_animation
	Example:		<input class="btn hui-animation" val="淡入" type="button" data-tra="hui-fadein" />
*/
/* duang 加特效 */
.hui-bounce,.hui-flip,.hui-flash,.hui-shake,.hui-swing,.hui-wobble,.hui-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease}
.hui-fadein,.hui-fadeinT,.hui-fadeinR,.hui-fadeinB,.hui-fadeinL,.hui-bouncein,.hui-bounceinT,.hui-bounceinR,.hui-bounceinB,.hui-bounceinL,.hui-rotatein,.hui-rotateinLT,.hui-rotateinLB,.hui-rotateinRT,.hui-rotateinRB,.hui-flipin,.hui-flipinX,.hui-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards}
.hui-fadeout,.hui-fadeoutT,.hui-fadeoutR,.hui-fadeoutB,.hui-fadeoutL,.hui-bounceout,.hui-bounceoutT,.hui-bounceoutR,.hui-bounceoutB,.hui-bounceoutL,.hui-rotateout,.hui-rotateoutLT,.hui-rotateoutLB,.hui-rotateoutRT,.hui-rotateoutRB,.hui-flipout,.hui-flipoutX,.hui-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards}

/* 淡入 */
.hui-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein}
/* 淡入-从上 */
.hui-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT}
/* 淡入-从右 */
.hui-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR}
/* 淡入-从下 */
.hui-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB}
/* 淡入-从左 */
.hui-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL}
/* 淡出 */
.hui-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout}

/* 淡出-向上 */
.hui-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT}
/* 淡出-向右 */
.hui-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR}
/* 淡出-向下 */
.hui-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB}
/* 淡出-向左 */
.hui-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL}

/* 弹跳 */
.hui-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce}

/* 弹入 */
.hui-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein}
/* 弹入-从上 */
.hui-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT}
/* 弹入-从右 */
.hui-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR}
/* 弹入-从下 */
.hui-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB}
/* 弹入-从左 */
.hui-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL}

/* 弹出 */
.hui-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout}
/* 弹出-向上 */
.hui-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT}
/* 弹出-向右 */
.hui-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR}
/* 弹出-向下 */
.hui-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB}
/* 弹出-向左 */
.hui-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL}

/* 转入 */
.hui-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein}
/* 转入-从左上 */
.hui-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT}
/* 转入-从左下 */
.hui-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB}
/* 转入-从右上 */
.hui-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT}
/* 转入-从右下*/
.hui-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB}

/* 转出 */
.hui-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout}
/* 转出-向左上 */
.hui-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT}
/* 转出-向左下 */
.hui-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB}
/* 转出-向右上 */
.hui-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT}
/* 转出-向右下 */
.hui-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB}

/* 翻转 */
.hui-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip}
/* 翻入-X轴 */
.hui-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX}
/* 翻入-Y轴 */
.hui-flipin,.hui-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY}
/* 翻出-X轴 */
.hui-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX}
/* 翻出-Y轴 */
.hui-flipout,.hui-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY}

/* 闪烁 */
.hui-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash}
/* 震颤 */
.hui-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake}
/* 摇摆 */
.hui-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing}
/* 摇晃 */
.hui-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble}
/* 震铃 */
.hui-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@-moz-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@-ms-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
/* 淡入-从上 */
@-webkit-keyframes fadeinT{
    0%{opacity:0;-webkit-transform:translateY(-100px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinT{
    0%{opacity:0;-moz-transform:translateY(-100px)}
    100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinT{
    0%{opacity:0;-ms-transform:translateY(-100px)}
    100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinT{
    0%{opacity:0;transform:translateY(-100px)}
    100%{opacity:1;transform:translateY(0)}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR{
    0%{opacity:0;-webkit-transform:translateX(100px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinR{
    0%{opacity:0;-moz-transform:translateX(100px)}
    100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinR{
    0%{opacity:0;-ms-transform:translateX(100px)}
    100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinR{
    0%{opacity:0;transform:translateX(100px)}
    100%{opacity:1;transform:translateX(0)}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB{
    0%{opacity:0;-webkit-transform:translateY(100px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinB{
    0%{opacity:0;-moz-transform:translateY(100px)}
    100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinB{
    0%{opacity:0;-ms-transform:translateY(100px)}
    100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinB{
    0%{opacity:0;transform:translateY(100px)}
    100%{opacity:1;transform:translateY(0)}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL{
    0%{opacity:0;-webkit-transform:translateX(-100px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinL{
    0%{opacity:0;-moz-transform:translateX(-100px)}
    100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinL{
    0%{opacity:0;-ms-transform:translateX(-100px)}
    100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinL{
    0%{opacity:0;transform:translateX(-100px)}
    100%{opacity:1;transform:translateX(0)}
}
/* 淡出 */
@-webkit-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@-moz-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@-ms-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
/* 淡出-向上 */
@-webkit-keyframes fadeoutT{
    0%{opacity:1;-webkit-transform:translateY(0)}
    100%{opacity:0;-webkit-transform:translateY(-100px)}
}
@-moz-keyframes fadeoutT{
    0%{opacity:1;-moz-transform:translateY(0)}
    100%{opacity:0;-moz-transform:translateY(-100px)}
}
@-ms-keyframes fadeoutT{
    0%{opacity:1;-ms-transform:translateY(0)}
    100%{opacity:0;-ms-transform:translateY(-100px)}
}
@keyframes fadeoutT{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-100px)}
}
/* 淡出-向右 */
@-webkit-keyframes fadeoutR{
    0%{opacity:1;-webkit-transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(100px)}
}
@-moz-keyframes fadeoutR{
    0%{opacity:1;-moz-transform:translateX(0)}
    100%{opacity:0;-moz-transform:translateX(100px)}
}
@-ms-keyframes fadeoutR{
    0%{opacity:1;-ms-transform:translateX(0)}
    100%{opacity:0;-ms-transform:translateX(100px)}
}
@keyframes fadeoutR{
    0%{opacity:1;transform:translateX(0)}
    100%{opacity:0;transform:translateX(100px)}
}
/* 淡出-向下 */
@-webkit-keyframes fadeoutB{
    0%{opacity:1;-webkit-transform:translateY(0)}
    100%{opacity:0;-webkit-transform:translateY(100px)}
}
@-moz-keyframes fadeoutB{
    0%{opacity:1;-moz-transform:translateY(0)}
    100%{opacity:0;-moz-transform:translateY(100px)}
}
@-ms-keyframes fadeoutB{
    0%{opacity:1;-ms-transform:translateY(0)}
    100%{opacity:0;-ms-transform:translateY(100px)}
}
@keyframes fadeoutB{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(100px)}
}
/* 淡出-向左 */
@-webkit-keyframes fadeoutL{
    0%{opacity:1;-webkit-transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(-100px)}
}
@-moz-keyframes fadeoutL{
    0%{opacity:1;-moz-transform:translateX(0)}
    100%{opacity:0;-moz-transform:translateX(-100px)}
}
@-ms-keyframes fadeoutL{
    0%{opacity:1;-ms-transform:translateX(0)}
    100%{opacity:0;-ms-transform:translateX(-100px)}
}
@keyframes fadeoutL{
    0%{opacity:1;transform:translateX(0)}
    100%{opacity:0;transform:translateX(-100px)}
}
/* 弹跳 */
@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
    40%{-webkit-transform:translateY(-30px)}
    60%{-webkit-transform:translateY(-15px)}
}
@-moz-keyframes bounce{
    0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
    40%{-moz-transform:translateY(-30px)}
    60%{-moz-transform:translateY(-15px)}
}
@-ms-keyframes bounce{
    0%,20%,50%,80%,100%{-ms-transform:translateY(0)}
    40%{-ms-transform:translateY(-30px)}
    60%{-ms-transform:translateY(-15px)}
}
@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0)}
    40%{transform:translateY(-30px)}
    60%{transform:translateY(-15px)}
}
/* 弹入 */
@-webkit-keyframes bouncein{
    0%{opacity:0;-webkit-transform:scale(0.3)}
    50%{opacity:1;-webkit-transform:scale(1.05)}
    70%{-webkit-transform:scale(0.9)}
    100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bouncein{
    0%{opacity:0;-moz-transform:scale(0.3)}
    50%{opacity:1;-moz-transform:scale(1.05)}
    70%{-moz-transform:scale(0.9)}
    100%{-moz-transform:scale(1)}
}
@-ms-keyframes bouncein{
    0%{opacity:0;-ms-transform:scale(0.3)}
    50%{opacity:1;-ms-transform:scale(1.05)}
    70%{-ms-transform:scale(0.9)}
    100%{-ms-transform:scale(1)}
}
@keyframes bouncein{
    0%{opacity:0;transform:scale(0.3)}
    50%{opacity:1;transform:scale(1.05)}
    70%{transform:scale(0.9)}
    100%{transform:scale(1)}
}
/* 弹入-从上 */
@-webkit-keyframes bounceinT{
    0%{opacity:0;-webkit-transform:translateY(-100px)}
    60%{opacity:1;-webkit-transform:translateY(30px)}
    80%{-webkit-transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinT{
    0%{opacity:0;-moz-transform:translateY(-100px)}
    60%{opacity:1;-moz-transform:translateY(30px)}
    80%{-moz-transform:translateY(-10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinT{
    0%{opacity:0;-ms-transform:translateY(-100px)}
    60%{opacity:1;-ms-transform:translateY(30px)}
    80%{-ms-transform:translateY(-10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinT{
    0%{opacity:0;transform:translateY(-100px)}
    60%{opacity:1;transform:translateY(30px)}
    80%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}
/* 弹入-从右 */
@-webkit-keyframes bounceinR{
    0%{opacity:0;-webkit-transform:translateX(100px)}
    60%{opacity:1;-webkit-transform:translateX(-30px)}
    80%{-webkit-transform:translateX(10px)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinR{
    0%{opacity:0;-moz-transform:translateX(100px)}
    60%{opacity:1;-moz-transform:translateX(-30px)}
    80%{-moz-transform:translateX(10px)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinR{
    0%{opacity:0;-ms-transform:translateX(100px)}
    60%{opacity:1;-ms-transform:translateX(-30px)}
    80%{-ms-transform:translateX(10px)}
    100%{-ms-transform:translateX(0)}
}
@keyframes bounceinR{
    0%{opacity:0;transform:translateX(100px)}
    60%{opacity:1;transform:translateX(-30px)}
    80%{transform:translateX(10px)}
    100%{transform:translateX(0)}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px)}
    60%{opacity:1;-webkit-transform:translateY(-30px)}
    80%{-webkit-transform:translateY(10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-moz-transform:translateY(100px)}
    60%{opacity:1;-moz-transform:translateY(-30px)}
    80%{-moz-transform:translateY(10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-ms-transform:translateY(100px)}
    60%{opacity:1;-ms-transform:translateY(-30px)}
    80%{-ms-transform:translateY(10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px)}
    60%{opacity:1;transform:translateY(-30px)}
    80%{transform:translateY(10px)}
    100%{transform:translateY(0)}
}
/* 弹入-从左 */
@-webkit-keyframes bounceinL{
    0%{opacity:0;-webkit-transform:translateX(-100px)}
    60%{opacity:1;-webkit-transform:translateX(30px)}
    80%{-webkit-transform:translateX(-10px)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinL{
    0%{opacity:0;-moz-transform:translateX(-100px)}
    60%{opacity:1;-moz-transform:translateX(30px)}
    80%{-moz-transform:translateX(-10px)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinL{
    0%{opacity:0;-ms-transform:translateX(-100px)}
    60%{opacity:1;-ms-transform:translateX(30px)}
    80%{-ms-transform:translateX(-10px)}
    100%{-ms-transform:translateX(0)}
}
@keyframes bounceinL{
    0%{opacity:0;transform:translateX(-100px)}
    60%{opacity:1;transform:translateX(30px)}
    80%{transform:translateX(-10px)}
    100%{transform:translateX(0)}
}
/* 弹出 */
@-webkit-keyframes bounceout{
    0%{-webkit-transform:scale(1)}
    25%{-webkit-transform:scale(0.95)}
    50%{opacity:1;-webkit-transform:scale(1.1)}
    100%{opacity:0;-webkit-transform:scale(0.3)}
}
@-moz-keyframes bounceout{
    0%{-moz-transform:scale(1)}
    25%{-moz-transform:scale(0.95)}
    50%{opacity:1;-moz-transform:scale(1.1)}
    100%{opacity:0;-moz-transform:scale(0.3)}
}
@-ms-keyframes bounceout{
    0%{-ms-transform:scale(1)}
    25%{-ms-transform:scale(0.95)}
    50%{opacity:1;-ms-transform:scale(1.1)}
    100%{opacity:0;-ms-transform:scale(0.3)}
}
@keyframes bounceout{
    0%{transform:scale(1)}
    25%{transform:scale(0.95)}
    50%{opacity:1;transform:scale(1.1)}
    100%{opacity:0;transform:scale(0.3)}
}
/* 弹出-向上*/
@-webkit-keyframes bounceoutT{
    0%{-webkit-transform:translateY(0)}
    20%{opacity:1;-webkit-transform:translateY(20px)}
    100%{opacity:0;-webkit-transform:translateY(-100px)}
}
@-moz-keyframes bounceoutT{
    0%{-moz-transform:translateY(0)}
    20%{opacity:1;-moz-transform:translateY(20px)}
    100%{opacity:0;-moz-transform:translateY(-100px)}
}
@-ms-keyframes bounceoutT{
    0%{-ms-transform:translateY(0)}
    20%{opacity:1;-ms-transform:translateY(20px)}
    100%{opacity:0;-ms-transform:translateY(-100px)}
}
@keyframes bounceoutT{
    0%{transform:translateY(0)}
    20%{opacity:1;transform:translateY(20px)}
    100%{opacity:0;transform:translateY(-100px)}
}
/* 弹出-向右*/
@-webkit-keyframes bounceoutR{
    0%{-webkit-transform:translateX(0)}
    20%{opacity:1;-webkit-transform:translateX(-20px)}
    100%{opacity:0;-webkit-transform:translateX(100px)}
}
@-moz-keyframes bounceoutR{
    0%{-moz-transform:translateX(0)}
    20%{opacity:1;-moz-transform:translateX(-20px)}
    100%{opacity:0;-moz-transform:translateX(100px)}
}
@-ms-keyframes bounceoutR{
    0%{-ms-transform:translateX(0)}
    20%{opacity:1;-ms-transform:translateX(-20px)}
    100%{opacity:0;-ms-transform:translateX(100px)}
}
@keyframes bounceoutR{
    0%{transform:translateX(0)}
    20%{opacity:1;transform:translateX(-20px)}
    100%{opacity:0;transform:translateX(100px)}
}
/* 弹出-向下 */
@-webkit-keyframes bounceoutB{
    0%{-webkit-transform:translateY(0)}
    20%{opacity:1;-webkit-transform:translateY(-20px)}
    100%{opacity:0;-webkit-transform:translateY(100px)}
}
@-moz-keyframes bounceoutB{
    0%{-moz-transform:translateY(0)}
    20%{opacity:1;-moz-transform:translateY(-20px)}
    100%{opacity:0;-moz-transform:translateY(100px)}
}
@-ms-keyframes bounceoutB{
    0%{-ms-transform:translateY(0)}
    20%{opacity:1;-ms-transform:translateY(-20px)}
    100%{opacity:0;-ms-transform:translateY(100px)}
}
@keyframes bounceoutB{
    0%{transform:translateY(0)}
    20%{opacity:1;transform:translateY(-20px)}
    100%{opacity:0;transform:translateY(100px)}
}
/* 弹出-向左 */
@-webkit-keyframes bounceoutL{
    0%{-webkit-transform:translateX(0)}
    20%{opacity:1;-webkit-transform:translateX(20px)}
    100%{opacity:0;-webkit-transform:translateX(-100px)}
}
@-moz-keyframes bounceoutL{
    0%{-moz-transform:translateX(0)}
    20%{opacity:1;-moz-transform:translateX(20px)}
    100%{opacity:0;-moz-transform:translateX(-100px)}
}
@-ms-keyframes bounceoutL{
    0%{-ms-transform:translateX(0)}
    20%{opacity:1;-ms-transform:translateX(20px)}
    100%{opacity:0;-ms-transform:translateX(-100px)}
}
@keyframes bounceoutL{
    0%{transform:translateX(0)}
    20%{opacity:1;transform:translateX(20px)}
    100%{opacity:0;transform:translateX(-200px)}
}
/* 转入 */
@-webkit-keyframes rotatein{
    0%{opacity:0;-webkit-transform:rotate(-200deg)}
    100%{opacity:1;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotatein{
    0%{opacity:0;-moz-transform:rotate(-200deg)}
    100%{opacity:1;-moz-transform:rotate(0)}
}
@-ms-keyframes rotatein{
    0%{opacity:0;-ms-transform:rotate(-200deg)}
    100%{opacity:1;-ms-transform:rotate(0)}
}
@keyframes rotatein{
    0%{opacity:0;transform:rotate(-200deg)}
    100%{opacity:1;transform:rotate(0)}
}
/* 转入-从左上 */
@-webkit-keyframes rotateinLT{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinLT{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinLT{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinLT{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从左下 */
@-webkit-keyframes rotateineftB{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateineftB{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateineftB{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateineftB{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右上 */
@-webkit-keyframes rotateinRT{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRT{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRT{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRT{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右下*/
@-webkit-keyframes rotateinRB{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRB{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRB{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRB{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/* 转出 */
@-webkit-keyframes rotateout{
    0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}
}
@-moz-keyframes rotateout{
    0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}
}
@-ms-keyframes rotateout{
    0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0}
}
@keyframes rotateout{
    0%{transform-origin:center center;transform:rotate(0);opacity:1}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0}
}
/* 转出-向左上 */
@-webkit-keyframes rotateoutLT{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
}
@-moz-keyframes rotateoutLT{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
}
@-ms-keyframes rotateoutLT{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
}
@keyframes rotateoutLT{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
}
/* 转出-向左下 */
@-webkit-keyframes rotateoutLB{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
}
@-moz-keyframes rotateoutLB{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
}
@-ms-keyframes rotateoutLB{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
}
@keyframes rotateoutLB{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
}
/* 转出-向右上 */
@-webkit-keyframes rotateoutRT{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
}
@-moz-keyframes rotateoutRT{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
}
@-ms-keyframes rotateoutRT{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
}
@keyframes rotateoutRT{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
}
/* 转出-向右下 */
@-webkit-keyframes rotateoutBR{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
}
@-moz-keyframes rotateoutBR{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
}
@-ms-keyframes rotateoutBR{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
}
@keyframes rotateoutBR{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
}
/* 翻转 */
@-webkit-keyframes flip{
    0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}
    40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}
    50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}
    80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in}
    100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}
}
@-moz-keyframes flip{
    0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}
    40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}
    50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}
    80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in}
    100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}
}
@-ms-keyframes flip{
    0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out}
    40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out}
    50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in}
    80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in}
    100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in}
}
@keyframes flip{
    0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}
    40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}
    50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}
    80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in}
    100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}
}
/* 翻入-X轴 */
@-webkit-keyframes flipinX{
    0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateX(10deg)}
    100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
}
@-moz-keyframes flipinX{
    0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-moz-transform:perspective(400px) rotateX(-10deg)}
    70%{-moz-transform:perspective(400px) rotateX(10deg)}
    100%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
}
@-ms-keyframes flipinX{
    0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-ms-transform:perspective(400px) rotateX(-10deg)}
    70%{-ms-transform:perspective(400px) rotateX(10deg)}
    100%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
}
@keyframes flipinX{
    0%{transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{transform:perspective(400px) rotateX(-10deg)}
    70%{transform:perspective(400px) rotateX(10deg)}
    100%{transform:perspective(400px) rotateX(0);opacity:1}
}
/* 翻入-Y轴 */
@-webkit-keyframes flipinY{
    0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateY(10deg)}
    100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
}
@-moz-keyframes flipinY{
    0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-moz-transform:perspective(400px) rotateY(-10deg)}
    70%{-moz-transform:perspective(400px) rotateY(10deg)}
    100%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
}
@-ms-keyframes flipinY{
    0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-ms-transform:perspective(400px) rotateY(-10deg)}
    70%{-ms-transform:perspective(400px) rotateY(10deg)}
    100%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
}
@keyframes flipinY{
    0%{transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{transform:perspective(400px) rotateY(-10deg)}
    70%{transform:perspective(400px) rotateY(10deg)}
    100%{transform:perspective(400px) rotateY(0);opacity:1}
}
/* 翻出-X轴 */
@-webkit-keyframes flipoutX{
    0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-moz-keyframes flipoutX{
    0%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-ms-keyframes flipoutX{
    0%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@keyframes flipoutX{
    0%{transform:perspective(400px) rotateX(0);opacity:1}
    100%{transform:perspective(400px) rotateX(90deg);opacity:0}
}
/* 翻出-Y轴 */
@-webkit-keyframes flipoutY{
    0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-moz-keyframes flipoutY{
    0%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-ms-keyframes flipoutY{
    0%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@keyframes flipoutY{
    0%{transform:perspective(400px) rotateY(0);opacity:1}
    100%{transform:perspective(400px) rotateY(90deg);opacity:0}
}
/* 闪烁 */
@-webkit-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@-moz-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@-ms-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
/* 震颤 */
@-webkit-keyframes shake{
    0%,100%{-webkit-transform:translateX(0)}
    10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
    20%,40%,60%,80%{-webkit-transform:translateX(10px)}
}
@-moz-keyframes shake{
    0%,100%{-moz-transform:translateX(0)}
    10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}
    20%,40%,60%,80%{-moz-transform:translateX(10px)}
}
@-ms-keyframes shake{
    0%,100%{-ms-transform:translateX(0)}
    10%,30%,50%,70%,90%{-ms-transform:translateX(-10px)}
    20%,40%,60%,80%{-ms-transform:translateX(10px)}
}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    10%,30%,50%,70%,90%{transform:translateX(-10px)}
    20%,40%,60%,80%{transform:translateX(10px)}
}
/* 摇摆 */
@-webkit-keyframes swing{
    20%{-webkit-transform:rotate(15deg)}
    40%{-webkit-transform:rotate(-10deg)}
    60%{-webkit-transform:rotate(5deg)}
    80%{-webkit-transform:rotate(-5deg)}
    100%{-webkit-transform:rotate(0)}
}
@-moz-keyframes swing{
    20%{-moz-transform:rotate(15deg)}
    40%{-moz-transform:rotate(-10deg)}
    60%{-moz-transform:rotate(5deg)}
    80%{-moz-transform:rotate(-5deg)}
    100%{-moz-transform:rotate(0)}
}
@-ms-keyframes swing{
    20%{-ms-transform:rotate(15deg)}
    40%{-ms-transform:rotate(-10deg)}
    60%{-ms-transform:rotate(5deg)}
    80%{-ms-transform:rotate(-5deg)}
    100%{-ms-transform:rotate(0)}
}
@keyframes swing{
    20%{transform:rotate(15deg)}
    40%{transform:rotate(-10deg)}
    60%{transform:rotate(5deg)}
    80%{transform:rotate(-5deg)}
    100%{transform:rotate(0)}
}
/* 摇晃 */
@-webkit-keyframes wobble{
    0%{-webkit-transform:translateX(0)}
    15%{-webkit-transform:translateX(-100px) rotate(-5deg)}
    30%{-webkit-transform:translateX(80px) rotate(3deg)}
    45%{-webkit-transform:translateX(-65px) rotate(-3deg)}
    60%{-webkit-transform:translateX(40px) rotate(2deg)}
    75%{-webkit-transform:translateX(-20px) rotate(-1deg)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes wobble{
    0%{-moz-transform:translateX(0)}
    15%{-moz-transform:translateX(-100px) rotate(-5deg)}
    30%{-moz-transform:translateX(80px) rotate(3deg)}
    45%{-moz-transform:translateX(-65px) rotate(-3deg)}
    60%{-moz-transform:translateX(40px) rotate(2deg)}
    75%{-moz-transform:translateX(-20px) rotate(-1deg)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes wobble{
    0%{-ms-transform:translateX(0)}
    15%{-ms-transform:translateX(-100px) rotate(-5deg)}
    30%{-ms-transform:translateX(80px) rotate(3deg)}
    45%{-ms-transform:translateX(-65px) rotate(-3deg)}
    60%{-ms-transform:translateX(40px) rotate(2deg)}
    75%{-ms-transform:translateX(-20px) rotate(-1deg)}
    100%{-ms-transform:translateX(0)}
}
@keyframes wobble{
    0%{transform:translateX(0)}
    15%{transform:translateX(-100px) rotate(-5deg)}
    30%{transform:translateX(80px) rotate(3deg)}
    45%{transform:translateX(-65px) rotate(-3deg)}
    60%{transform:translateX(40px) rotate(2deg)}
    75%{transform:translateX(-20px) rotate(-1deg)}
    100%{transform:translateX(0)}
}
/* 震铃 */
@-webkit-keyframes ring{
    0%{-webkit-transform:scale(1)}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
    100%{-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes ring{
    0%{-moz-transform:scale(1)}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
    100%{-moz-transform:scale(1) rotate(0)}
}
@-ms-keyframes ring{
    0%{-ms-transform:scale(1)}
    10%,20%{-ms-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg)}
    100%{-ms-transform:scale(1) rotate(0)}
}
@keyframes ring{
    0%{transform:scale(1)}
    10%,20%{transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
    100%{transform:scale(1) rotate(0)}
}

/*2.2 导航*/
/*2.2.1 顶部导航
	Name:			mod_topnav
	Sample:
	<div class="topnav"><div class="cl"><div class="l">您好，欢迎来到Hui！</div><div class="r"><span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addFavorite();">收藏本站</a></span><span class="pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a></span></div></div></div>

*/
.topnav{height:30px;line-height:30px;background-color:#f7f7f7;border-bottom:1px solid #EBEBEB; font-size:12px}
.topbar{background-color: #ECECEC;border-bottom:1px solid #ddd}
.topbar a{margin-right:5px}
.r_nav{display:inline-block; color:#999}

/*2.2.2 向导
	Name:			mod_steps
	Sample:
	<div class="four steps">
	  <span class="step">第一步</span>
	  <span class="active step">第二步</span>
	  <span class="disabled step">第三步</span>
	  <span class="disabled step">第四步</span>
	</div>
*/
.steps,.step{display:inline-block;position:relative;padding:1em 2em 1em 3em;vertical-align:top;background-color:#FFF;color:#888;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box
}
.step:after,.steps .step:after{position:absolute;z-index:2;content:'';top:0;right:-1.45em;border-bottom:1.5em solid transparent;border-left:1.5em solid #FFF;border-top:1.5em solid transparent;width:0;height:0}
.step,.steps .step,.steps .step:after{
	-webkit-transition:opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;
	transition:opacity .1s ease,color .1s ease,box-shadow .1s ease
}
.steps{cursor:pointer;display:inline-block;font-size:0;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:.3125rem;line-height:1;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box}
.steps .step:first-child{padding-left:1.35em;border-radius:.3125em 0 0 .3125em}
.steps .step:last-child{border-radius:0 .3125em .3125em 0}
.steps .step:only-child{border-radius:.3125em}
.steps .step:last-child{margin-right:0}
.steps .step:last-child:after{display:none}
.step:hover,.step.hover{background-color:#F7F7F7;color:rgba(0,0,0,.8)}
.steps .step.hover:after,
.steps .step:hover:after,
.step:hover,
.step.hover::after{border-left-color:#F7F7F7}
.steps .step.down,
.steps .step:active,
.step.down,
.step:active{background-color:#F0F0F0}
.steps .step.down:after,
.steps .step:active:after,
.steps.down::after,
.steps:active::after{border-left-color:#F0F0F0}
.steps .step.active,
.active.step{cursor:auto;background-color:#428BCA;color:#FFF;font-weight:700}.steps .step.active:after,.active.steps:after{border-left-color:#428BCA}
.steps .disabled.step,
.disabled.step{cursor:auto;background-color:#FFF;color:#CBCBCB}
.disabled.step:after{border:0;background-color:#FFF;top:.42em;right:-1em;width:2.15em;height:2.15em;
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
	box-shadow:-1px -1px 0 0 rgba(0,0,0,.1) inset
}
.attached.steps{margin:0;border-radius:.3125em .3125em 0 0}
.attached.steps .step:first-child{border-radius:.3125em 0 0}
.attached.steps .step:last-child{border-radius:0 .3125em 0 0}
.bottom.attached.steps{margin-top:-1px;border-radius:0 0 .3125em .3125em}
.bottom.attached.steps .step:first-child{border-radius:0 0 0 .3125em}
.bottom.attached.steps .step:last-child{border-radius:0 0 .3125em}

/*向导数量*/
.one.steps,.two.steps,.three.steps,.four.steps,.five.steps,.six.steps,.seven.steps,.eight.steps{display:block}
.one.steps > .step{width:100%}
.two.steps > .step{width:50%}
.three.steps > .step{width:33.333%}
.four.steps > .step{width:25%}
.five.steps > .step{width:20%}
.six.steps > .step{width:16.666%}
.seven.steps > .step{width:14.285%}
.eight.steps > .step{width:12.5%}

/*向导尺寸*/
.small.step,.small.steps .step{font-size:.8rem}/*小*/
.step,.steps .step{font-size:1rem}/*默认*/
.large.step,.large.steps .step{font-size:1.25rem}/*大*/

/*兼容写法
	Sample:
	<div class="steps-ie cl">
	  <a class="step-ie active" href="#">第一步<em class="arrow"></em></a>
	  <a class="step-ie" href="#">第二步<em class="arrow"></em></a>
	  <a class="step-ie" href="#">第三步<em class="arrow"></em></a>
	</div>
*/
.steps-ie,.step-ie,.step-ie .arrow{height:44px; line-height:44px}
.steps-ie{background-color:#eaf4fd; border:solid 1px #afcfcc}
.step-ie{position:relative;display:inline-block; float:left; cursor:pointer; padding:0 20px 0 40px; background:url(../images/steps/step_bg.png) repeat-x 0 center}
.step-ie .arrow{position:absolute;right:-21px; top:0; width:21px; height:44px; display:block; cursor:pointer; background:url(../images/steps/step_arrow.png) no-repeat 0 center;z-index:50}
.step-ie.active{background-image:url(../images/steps/step_bg-active.png); color:#fff; z-index:100}
.step-ie.active .arrow{background-image:url(../images/steps/step_arrow-active.png)}


/*2.3 折叠
	Name:			mod_Huifold
	Sample:
	<ul id="" class="Huifold">
	  <li class="item"><h4>标题<b>+</b></h4><div class="info">内容 </div></li>
	  ……
	</ul>
*/
.Huifold .item{position:relative}
.Huifold .item h4{margin:0;font-weight:bold;position:relative;border-top: 1px solid #fff;font-size:15px;line-height:22px;padding:7px 10px;background-color:#eee;cursor:pointer;padding-right:30px}
.Huifold .item h4 b{position:absolute;display: block; cursor:pointer;right:10px;top:7px;width:16px;height:16px; text-align:center; color:#666}
.Huifold .item .info{display:none;padding:10px}




/*2.4 空心按钮
	Name:			mod_Huifold
	Sample:
	<ul id="" class="Huifold">
	  <li class="item"><h4>标题<b>+</b></h4><div class="info">内容 </div></li>
	  ……
	</ul>
*/
.btn-green-outline {
    color: #31C27C;
    background-color: transparent;
    border-color: #31C27C;
}
.btn-green-outline:hover,
.btn-green-outline:focus {
    background-color: #31C27C;
    color:#fff;
}


.btn-default-outline {
  color: #999;
  background-color: transparent;
  border-color: #999;
}
a.btn-default-outline:visited {
  color: #444;
}
.btn-default-outline:hover,
.btn-default-outline:focus,
.btn-default-outline:active,
.btn-default-outline.am-active,
.am-dropdown.am-active .btn-default-outline.am-dropdown-toggle {
  color: #fff;
  border-color: #c7c7c7;
}
.btn-default-outline:hover,
.btn-default-outline:focus {
  background-color: #d4d4d4;
}
.btn-default-outline:active,
.btn-default-outline.am-active,
.am-dropdown.am-active .btn-default-outline.am-dropdown-toggle {
  background-image: none;
  background-color: #c2c2c2;
}
.btn-default-outline.am-disabled,
.btn-default-outline[disabled],
fieldset[disabled] .btn-default-outline,
.btn-default-outline.am-disabled:hover,
.btn-default-outline[disabled]:hover,
fieldset[disabled] .btn-default-outline:hover,
.btn-default-outline.am-disabled:focus,
.btn-default-outline[disabled]:focus,
fieldset[disabled] .btn-default-outline:focus,
.btn-default-outline.am-disabled:active,
.btn-default-outline[disabled]:active,
fieldset[disabled] .btn-default-outline:active,
.btn-default-outline.am-disabled.am-active,
.btn-default-outline[disabled].am-active,
fieldset[disabled] .btn-default-outline.am-active {
  background-color: transparent;
  border-color: #e6e6e6;
}
.am-btn-group .btn-default-outline,
.am-btn-group-stacked .btn-default-outline {
  border-color: #d9d9d9;
}
.btn-primary-outline {
  color: #0e90d2;
  background-color: transparent;
  border-color: #0e90d2;
}
a.btn-primary-outline:visited {
  color: #fff;
}
.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-primary-outline:active,
.btn-primary-outline.am-active,
.am-dropdown.am-active .btn-primary-outline.am-dropdown-toggle {
  color: #fff;
  border-color: #0a6999;
}
.btn-primary-outline:hover,
.btn-primary-outline:focus {
  background-color: #0c79b1;
}
.btn-primary-outline:active,
.btn-primary-outline.am-active,
.am-dropdown.am-active .btn-primary-outline.am-dropdown-toggle {
  background-image: none;
  background-color: #0a628f;
}
.btn-primary-outline.am-disabled,
.btn-primary-outline[disabled],
fieldset[disabled] .btn-primary-outline,
.btn-primary-outline.am-disabled:hover,
.btn-primary-outline[disabled]:hover,
fieldset[disabled] .btn-primary-outline:hover,
.btn-primary-outline.am-disabled:focus,
.btn-primary-outline[disabled]:focus,
fieldset[disabled] .btn-primary-outline:focus,
.btn-primary-outline.am-disabled:active,
.btn-primary-outline[disabled]:active,
fieldset[disabled] .btn-primary-outline:active,
.btn-primary-outline.am-disabled.am-active,
.btn-primary-outline[disabled].am-active,
fieldset[disabled] .btn-primary-outline.am-active {
  background-color: #0e90d2;
  border-color: #0e90d2;
}
.am-btn-group .btn-primary-outline,
.am-btn-group-stacked .btn-primary-outline {
  border-color: #0c80ba;
}
.btn-secondary-outline {
  color: #3bb4f2;
  background-color: transparent;
  border-color: #3bb4f2;
}
a.btn-secondary-outline:visited {
  color: #fff;
}
.btn-secondary-outline:hover,
.btn-secondary-outline:focus,
.btn-secondary-outline:active,
.btn-secondary-outline.am-active,
.am-dropdown.am-active .btn-secondary-outline.am-dropdown-toggle {
  color: #fff;
  border-color: #0f9ae0;
}
.btn-secondary-outline:hover,
.btn-secondary-outline:focus {
  background-color: #19a7f0;
}
.btn-secondary-outline:active,
.btn-secondary-outline.am-active,
.am-dropdown.am-active .btn-secondary-outline.am-dropdown-toggle {
  background-image: none;
  background-color: #0e93d7;
}
.btn-secondary-outline.am-disabled,
.btn-secondary-outline[disabled],
fieldset[disabled] .btn-secondary-outline,
.btn-secondary-outline.am-disabled:hover,
.btn-secondary-outline[disabled]:hover,
fieldset[disabled] .btn-secondary-outline:hover,
.btn-secondary-outline.am-disabled:focus,
.btn-secondary-outline[disabled]:focus,
fieldset[disabled] .btn-secondary-outline:focus,
.btn-secondary-outline.am-disabled:active,
.btn-secondary-outline[disabled]:active,
fieldset[disabled] .btn-secondary-outline:active,
.btn-secondary-outline.am-disabled.am-active,
.btn-secondary-outline[disabled].am-active,
fieldset[disabled] .btn-secondary-outline.am-active {
  background-color: #3bb4f2;
  border-color: #3bb4f2;
}
.am-btn-group .btn-secondary-outline,
.am-btn-group-stacked .btn-secondary-outline {
  border-color: #23abf0;
}
.btn-warning-outline {
  color: #F37B1D;
  background-color: transparent;
  border-color: #F37B1D;
}
a.btn-warning-outline:visited {
  color: #F37B1D;
}
a.btn-warning-outline:hover {
  color: #fff;
}
.btn-warning-outline:hover,
.btn-warning-outline:focus,
.btn-warning-outline:active,
.btn-warning-outline.am-active,
.am-dropdown.am-active .btn-warning-outline.am-dropdown-toggle {
  color: #fff;
  border-color: #c85e0b;
}
.btn-warning-outline:hover,
.btn-warning-outline:focus {
  background-color: #e0690c;
}
.btn-warning-outline:active,
.btn-warning-outline.am-active,
.am-dropdown.am-active .btn-warning-outline.am-dropdown-toggle {
  background-image: none;
  background-color: #be590a;
}
.btn-warning-outline.am-disabled,
.btn-warning-outline[disabled],
fieldset[disabled] .btn-warning-outline,
.btn-warning-outline.am-disabled:hover,
.btn-warning-outline[disabled]:hover,
fieldset[disabled] .btn-warning-outline:hover,
.btn-warning-outline.am-disabled:focus,
.btn-warning-outline[disabled]:focus,
fieldset[disabled] .btn-warning-outline:focus,
.btn-warning-outline.am-disabled:active,
.btn-warning-outline[disabled]:active,
fieldset[disabled] .btn-warning-outline:active,
.btn-warning-outline.am-disabled.am-active,
.btn-warning-outline[disabled].am-active,
fieldset[disabled] .btn-warning-outline.am-active {
  background-color: #F37B1D;
  border-color: #F37B1D;
  
}
.am-btn-group .btn-warning-outline,
.am-btn-group-stacked .btn-warning-outline {
  border-color: #ea6e0c;
}
.btn-danger-outline {
  color: #dd514c;
  background-color: transparent;
  border-color: #dd514c;
}
a.btn-danger-outline:visited {
  color: #dd514c;
}
a.btn-danger-outline:hover {
  color: #fff;
}
.btn-danger-outline:hover,
.btn-danger-outline:focus,
.btn-danger-outline:active,
.btn-danger-outline.am-active,
.am-dropdown.am-active .btn-danger-outline.am-dropdown-toggle {
  color: #fff;
  border-color: #c62b26;
}
.btn-danger-outline:hover,
.btn-danger-outline:focus {
  background-color: #d7342e;
}
.btn-danger-outline:active,
.btn-danger-outline.am-active,
.am-dropdown.am-active .btn-danger-outline.am-dropdown-toggle {
  background-image: none;
  background-color: #be2924;
}
.btn-danger-outline.am-disabled,
.btn-danger-outline[disabled],
fieldset[disabled] .btn-danger-outline,
.btn-danger-outline.am-disabled:hover,
.btn-danger-outline[disabled]:hover,
fieldset[disabled] .btn-danger-outline:hover,
.btn-danger-outline.am-disabled:focus,
.btn-danger-outline[disabled]:focus,
fieldset[disabled] .btn-danger-outline:focus,
.btn-danger-outline.am-disabled:active,
.btn-danger-outline[disabled]:active,
fieldset[disabled] .btn-danger-outline:active,
.btn-danger-outline.am-disabled.am-active,
.btn-danger-outline[disabled].am-active,
fieldset[disabled] .btn-danger-outline.am-active {
  background-color: #dd514c;
  border-color: #dd514c;
}
.am-btn-group .btn-danger-outline,
.am-btn-group-stacked .btn-danger-outline {
  border-color: #d93c37;
}
.btn-success-outline {
  color: #5eb95e;
  background-color: transparent;
  border-color: #5eb95e;
}
a.btn-success-outline:visited {
  color: #5eb95e;
}
a.btn-success-outline:hover {
  color: #fff;
}
.btn-success-outline:hover,
.btn-success-outline:focus,
.btn-success-outline:active,
.btn-success-outline.am-active,
.am-dropdown.am-active .btn-success-outline.am-dropdown-toggle {
  color: #fff;
  border-color: #429842;
}
.btn-success-outline:hover,
.btn-success-outline:focus {
  background-color: #4aaa4a;
}
.btn-success-outline:active,
.btn-success-outline.am-active,
.am-dropdown.am-active .btn-success-outline.am-dropdown-toggle {
  background-image: none;
  background-color: #3f913f;
}
.btn-success-outline.am-disabled,
a.btn-success-outline.am-disabled,
.btn-success-outline[disabled],
fieldset[disabled] .btn-success-outline,
.btn-success-outline.am-disabled:hover,
.btn-success-outline[disabled]:hover,
fieldset[disabled] .btn-success-outline:hover,
.btn-success-outline.am-disabled:focus,
.btn-success-outline[disabled]:focus,
fieldset[disabled] .btn-success-outline:focus,
.btn-success-outline.am-disabled:active,
.btn-success-outline[disabled]:active,
fieldset[disabled] .btn-success-outline:active,
.btn-success-outline.am-disabled.am-active,
.btn-success-outline[disabled].am-active,
fieldset[disabled] .btn-success-outline.am-active {
  background-color: #5eb95e;
  border-color: #5eb95e;
}

.am-btn-group .btn-success-outline,
.am-btn-group-stacked .btn-success-outline {
  border-color: #4db14d;}
  
a.btn-success-outline.am-disabled,
a.btn-warning-outline.am-disabled{
  background-color: #e6e6e6;
  border-color: #ccc;
  color: #999 ;
}




/*2.5 单行平分列
	Name:			z_divline
	Explain:		与AMAZE UI一样，把一行分为12列，每列中间20PX间隔
	Sample:
	<div class="z-div-line">
	  <div class="z-div-line-6">1</div>
	  <div class="z-div-line-6">1</div>
	</div>
*/
.z-div-line {margin-right:-20px}
.z-div-line:before,
.z-div-line:after {
  content: " ";
  display: table;
}
.z-div-line:after {
  clear: both;
}
.z-div-line-1 {margin-right:20px; float: left; width:calc(8.33333333% - 20px);}
.z-div-line-2 {margin-right:20px; float: left; width:calc(16.66666667% - 20px);}
.z-div-line-3 {margin-right:20px; float: left; width:calc(25% - 20px);}
.z-div-line-4 {margin-right:20px; float: left; width:calc(33.33333333% - 20px);}
.z-div-line-5 {margin-right:20px; float: left; width:calc(41.66666667% - 20px);}
.z-div-line-6 {margin-right:20px; float: left; width:calc(50% - 20px);}
.z-div-line-7 {margin-right:20px; float: left; width:calc(58.33333333% - 20px);}
.z-div-line-8 {margin-right:20px; float: left; width:calc(66.66666667% - 20px);}
.z-div-line-9 {margin-right:20px; float: left; width:calc(75% - 20px);}
.z-div-line-10 {margin-right:20px; float: left; width:calc(83.33333333% - 20px);}
.z-div-line-11 {margin-right:20px; float: left; width:calc(91.66666667% - 20px);}
.z-div-line-12 {margin-right:20px; float: left; width:calc(100% - 20px);}
.am-u-sm-2-5 {width: 20%}

/*2.6 弹出侧边栏
	Name:			z_spmenu
	Explain:		上下左右弹出侧边栏，可添加PUSH效果
*/
/* General styles for all menus */
.z-spmenu {
	background: #47a3da;
	position: fixed;
}

.z-spmenu h3 {
	color: #afdefa;
	font-size: 1.9em;
	padding: 20px;
	margin: 0;
	font-weight: 300;
	background: #0d77b6;
}

.z-spmenu a {
	display: block;
	color: #fff;
	font-size: 1.1em;
	font-weight: 300;
}

.z-spmenu a:hover {
	background: #258ecd;
}

.z-spmenu a:active {
	background: #afdefa;
	color: #47a3da;
}

/* Orientation-dependent styles for the content of the menu */

.z-spmenu-vertical {
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

.z-spmenu-vertical a {
	border-bottom: 1px solid #258ecd;
	padding: 1em;
}

.z-spmenu-horizontal {
	width: 100%;
	height: 150px;
	left: 0;
	z-index: 1000;
	overflow: hidden;
}

.z-spmenu-horizontal h3 {
	height: 100%;
	width: 20%;
	float: left;
}

.z-spmenu-horizontal a {
	float: left;
	width: 20%;
	padding: 0.8em;
	border-left: 1px solid #258ecd;
}

/* Vertical menu that slides from the left or right */

.z-spmenu-left {
	left: -240px;
}

.z-spmenu-right {
	right: -240px;
}

.z-spmenu-left.z-spmenu-open {
	left: 0px;
}

.z-spmenu-right.z-spmenu-open {
	right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.z-spmenu-top {
	top: -150px;
}

.z-spmenu-bottom {
	bottom: -150px;
}

.z-spmenu-top.z-spmenu-open {
	top: 0px;
}

.z-spmenu-bottom.z-spmenu-open {
	bottom: 0px;
}

/* Push classes applied to the body */

.z-spmenu-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.z-spmenu-push-toright {
	left: 240px;
}

.z-spmenu-push-toleft {
	left: -240px;
}

/* Transitions */

.z-spmenu,
.z-spmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

	.z-spmenu-horizontal {
		font-size: 75%;
		height: 110px;
	}

	.z-spmenu-top {
		top: -110px;
	}

	.z-spmenu-bottom {
		bottom: -110px;
	}

}

@media screen and (max-height: 26.375em){

	.z-spmenu-vertical {
		font-size: 90%;
		width: 190px;
	}

	.z-spmenu-left,
	.z-spmenu-push-toleft {
		left: -190px;
	}

	.z-spmenu-right {
		right: -190px;
	}

	.z-spmenu-push-toright {
		left: 190px;
	}
}



/*2.7 选项卡
	Name:			z_spmenu
	Explain:		上下左右弹出侧边栏，可添加PUSH效果
*/

.order_details{margin-top:48px;}
.order_details ul{margin:0px;padding:0px;border-bottom: 1px solid #b4b4b4;position: relative;}
.order_details ul li{float: left;display: block;width: 150px;position: absolute;top:-24px;text-align: center;font-size: 17px;color: #2077d6}
.order_details .checked{background-color: #fff;color: #636363;border:1px solid #b4b4b4;border-bottom:0 ;}
.prepaids{position: absolute;left:75px;}
.prepaids2{position: absolute;left:255px;}
.prepaids3{position: absolute;left:413px;}
.hidedomdiv{display: none}
.showdomdiv{display: block;}
.showsss{border:1px solid red;text-align: center;line-height: 100px;font-size:40px;}



/*2.7 轮播
	Name:			z_spmenu
	Explain:		上下左右弹出侧边栏，可添加PUSH效果
*/
/*! Amaze UI Plugin ~ slick */
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
/* Slider */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  margin-top: -10px;
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before,
.slick-next:hover:before,
.slick-prev:focus:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "FontAwesome";
  font-size: 20px;
  line-height: 1;
  color: #0e90d2;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-prev {
  left: -25px;
}
[dir="rtl"] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "\f137";
}
[dir="rtl"] .slick-prev:before {
  content: "\f138";
}
.slick-next {
  right: -25px;
}
[dir="rtl"] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "\f138";
}
[dir="rtl"] .slick-next:before {
  content: "\f137";
}
/* Dots */
.slick-slider {
  margin-bottom: 30px;
}
.slick-dots {
  position: absolute;
  bottom: -45px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0;
  font-size: 0;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-size: 32px;
  line-height: 20px;
  text-align: center;
  color: #0e90d2;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: #0e90d2;
  opacity: 0.75;
}
